<!-- 导入预览 -->
<template>
  <el-dialog
    title="导入预览"
    :visible.sync="dialogDicVisible"
    :destroy-on-close="true"
    width="80%"
    top="4vh"
    class="ky-small-dialog"
    :before-close="handleDicClose">
    <!-- <el-card shadow="hover" class="ky-card ky-card-hdbg"> -->
    <el-form :inline="true" class="m-t-1 apply-card ky-form-inline ky-form-inline-sm" label-width="90px">
      <el-form-item label="医院名称" label-width="90px">
        <el-select
          size="small"
          v-model="formData.hospitalCode"
          @change="hospitalChange"
          placeholder="请选择医院"
          filterable
        >
          <el-option
            v-for="item in mx_hospitalList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- </el-card> -->
    <el-card shadow="hover" class="ky-card-xs ky-card-hdbg ky-mt10">
      <el-table :data="showData" class="ky-table" :height="560" border highlight-current-row v-loading="loading">
        <el-table-column prop="hospitalCode" label="医院名称" :formatter="frtHospCode" align="center" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="dep" label="检查部门" align="center" width="110"> </el-table-column>
        <el-table-column prop="modality" label="设备类型" align="center" width="110"> </el-table-column>
        <el-table-column prop="bigpart" label="大部位" align="center" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="bigpartEn" label="大部位英文" align="center" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="smallpart" label="小部位" align="center" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="smallpartEn" label="小部位英文" align="center" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="templatePart" label="模板部位" align="center" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="itemCode" label="部位编码" align="center" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="partType" label="是否省对照部位" align="center" :formatter="partTypeFm"> </el-table-column>
        <el-table-column prop="examNoticeGroup" label="注意事项组" align="center" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="itemProperty" label="项目属性" align="center" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="workCount" label="系数" align="center" width="55"> </el-table-column>
        <el-table-column prop="filter" label="过滤检查项目" align="center" width="120"> </el-table-column>
        <el-table-column prop="uisId" label="超声部位代码" align="center" width="120"> </el-table-column>
        <el-table-column prop="hisid" label="HIS部位代码" align="center" width="120"> </el-table-column>
        <el-table-column prop="itemName" label="省互认项目名称" align="center" width="120"> </el-table-column>
      </el-table>
      <paginationCont
        :total="totalCount"
        :page.sync="currentPage"
        :limit.sync="pageSize"
        @pagination="fetchData"
      />
    </el-card>
    <span slot="footer" class="dialog-footer">
      <div class="tooltip">
        <i class="el-icon-info"></i>
        <span>温馨提示：已导入过的相同的检查部门，检查设备，检查部位<span class="fc_red">不会再重复导入</span></span>
      </div>
      <el-button size="small" @click="handleDicClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleDicConfirm">导 入</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { importlist } from '@/api/api.js'
import paginationCont from '@/components/Pagination/index'
export default {
  name: '',
  mixins: [],
  components: { paginationCont },
  props: {
    importData: {
      Array,
      default: () => []
    },
    visible: {
      Boolean,
      default: false
    },
    hospitalCode: {
      String,
      default: ''
    }
  },
  data() {
    return {
      dialogDicVisible: false,
      formData: {
        hospitalCode: ''
      },
      loading: false,
      tableData: [],
      showData: [],
      totalCount: 0,
      pageSize: 10,
      currentPage: 1
    }
  },
  watch: {
    visible(val) {
      this.dialogDicVisible = val
      if (val) {
        this.$getHospitalList()
      }
    },
    dialogDicVisible(val) {
      this.$emit('update:visible', val)
    },
    hospitalCode: {
      handler(val) {
        this.formData.hospitalCode = val
      },
      immediate: true
    },
    importData(val) {
      if (val && val.length > 0) {
        this.tableData = JSON.parse(JSON.stringify(val))
        this.totalCount = this.tableData.length
        this.fetchData()
        this.$emit('refresh')
      }
    }
  },
  computed: {},
  mounted() {

  },
  methods: {
    partTypeFm(row, cell, value) {
      return value === 1 ? '是' : '否'
    },
    handleDicClose() {
      this.formData.hospitalCode = this.hospitalCode
      this.currentPage = 1
      this.totalCount = 0
      this.pageSize = 10
      this.showData = []
      this.$emit('update:importData', [])
      this.$emit('update:visible', false)
    },
    handleDicConfirm() {
      this.loading = true
      importlist({ hospitalCode: this.formData.hospitalCode, hisRegisterparts: this.tableData }).then(res => {
        if (res && res.code === 10000) {
          this.$message.success(res.message)
          this.handleDicClose()
        }
        this.loading = false
      })
    },
    // 格式化医院code
    frtHospCode(row, column, cellValue, index) {
      let name = ''
      let hospIndex = this.mx_hospitalList.findIndex(item => item.code === cellValue)
      if (hospIndex !== -1) {
        name = this.mx_hospitalList[hospIndex].name
      }
      return name
    },
    hospitalChange(val) {
      this.tableData.forEach(v => {
        v.hospitalCode = this.formData.hospitalCode
      })
    },
    fetchData() {
      this.showData = []
      let beginIndex = (this.currentPage - 1) * this.pageSize
      let endIndex = this.currentPage * this.pageSize > this.tableData.length ? this.tableData.length : this.currentPage * this.pageSize
      for (let i = beginIndex; i < endIndex; i++) {
        this.showData.push(this.tableData[i])
      }
    }
  },
  beforeDestroy() {},
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.tooltip{
    float: left;
    line-height: 42px;
}
</style>
